<script setup>
defineProps({
  project: {
    type: Object,
    required: true
  }
});
</script>

<template>
  <div class="project-card">
    <h3>{{ project.name }}</h3>
    <p class="description">{{ project.description }}</p>
    <div class="links">
      <a :href="project.github" target="_blank" class="github-link">
        <i class="fab fa-github"></i>
        GitHub
      </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.project-card {
  padding: var(--gap);
  background: var(--white);
  border-radius: var(--radius);
  transition: transform var(--transition-duration);

  &:hover {
    transform: translateY(-5px);
  }

  h3 {
    margin-bottom: var(--space);
  }

  .description {
    margin-bottom: var(--gap);
    color: #666;
    line-height: 1.6;
  }

  .links {
    display: flex;
    gap: var(--space);

    .github-link {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--primary-color);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>